Skip to content

feat(browser): Add View Hierarchy integration#14981

Draft
timfish wants to merge 7 commits intodevelopfrom
timfish/feat/browser-view-hierarchy
Draft

feat(browser): Add View Hierarchy integration#14981
timfish wants to merge 7 commits intodevelopfrom
timfish/feat/browser-view-hierarchy

Conversation

@timfish
Copy link
Copy Markdown
Collaborator

@timfish timfish commented Jan 11, 2025 •
edited
Loading

image

By default it captures the entire DOM, but it is configurable:

Capture only React components (uses attributes added by Sentry bundler plugins):

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: '__DSN__',
  integrations: [Sentry.viewHierarchyIntegration({
    onElement: ({componentName}) => componentName ? {} : 'children'
  })],
});

Capture only Web Components:

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: '__DSN__',
  integrations: [Sentry.viewHierarchyIntegration({
    onElement: ({tagName}) => tagName.includes('-') ? {} : 'children'
  })],
});

@codecov
Copy link
Copy Markdown

codecov bot commented Jan 11, 2025 •
edited
Loading

❌ 1 Tests Failed:

Tests completed Failed Passed Skipped
628 1 627 299
View the top 1 failed tests by shortest run time 
client-app-routing-instrumentation.test.ts Creates a navigation transaction for app router routes
Stack Traces | 30s run time 
client-app-routing-instrumentation.test.ts:19:5 Creates a navigation transaction for app router routes

To view more test analytics, go to the Test Analytics Dashboard
📢 Thoughts on this report? Let us know!

@AbhiPrasad
Copy link
Copy Markdown
Contributor

AbhiPrasad commented Jan 14, 2025

woah

what does it look like with minified class names? (and you don't have react component annotations or similar?)

@timfish
Copy link
Copy Markdown
Collaborator Author

timfish commented Jan 14, 2025

By default it's capturing getComponentName(element) || element.tagName.toLowerCase(). So the above example actually has no React components on the page, it's simply displaying HTML elements and the tag names with a hyphen (-) are Web Components.

Here is the full event:
https://sentry-sdks.sentry.io/issues/6212345017/events/c6fa1362bdf5410487cf8461d6168583/

@mydea mydea mentioned this pull request Mar 28, 2025
Closed
2 tasks
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Feb 11, 2026 •
edited
Loading

Codecov Results 📊

Generated by Codecov Action

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Feb 11, 2026 •
edited
Loading

node-overhead report 🧳

Note: This is a synthetic benchmark with a minimal express app and does not necessarily reflect the real-world performance impact in an application.

Scenario Requests/s % of Baseline Prev. Requests/s Change %
GET Baseline 8,792 - 8,837 -1%
GET With Sentry 1,682 19% 1,654 +2%
GET With Sentry (error only) 6,175 70% 6,073 +2%
POST Baseline 1,194 - 1,202 -1%
POST With Sentry 593 50% 591 +0%
POST With Sentry (error only) 1,071 90% 1,051 +2%
MYSQL Baseline 3,223 - 3,229 -0%
MYSQL With Sentry 471 15% 487 -3%
MYSQL With Sentry (error only) 2,636 82% 2,640 -0%

View base workflow run

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Feb 26, 2026 •
edited
Loading

size-limit report 📦

⚠️ Warning: Base artifact is not the latest one, because the latest workflow run is not done yet. This may lead to incorrect results. Try to re-run all tests to get up to date results.

Path Size % Change Change
@sentry/browser 25.69 kB - -
@sentry/browser - with treeshaking flags 24.17 kB - -
@sentry/browser (incl. Tracing) 42.17 kB - -
@sentry/browser (incl. Tracing, Profiling) 46.79 kB - -
@sentry/browser (incl. Tracing, Replay) 80.98 kB - -
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags 70.6 kB - -
@sentry/browser (incl. Tracing, Replay with Canvas) 85.7 kB - -
@sentry/browser (incl. Tracing, Replay, Feedback) 97.97 kB - -
@sentry/browser (incl. Feedback) 42.48 kB - -
@sentry/browser (incl. sendFeedback) 30.35 kB - -
@sentry/browser (incl. FeedbackAsync) 35.4 kB - -
@sentry/browser (incl. Metrics) 26.96 kB - -
@sentry/browser (incl. Logs) 27.1 kB - -
@sentry/browser (incl. Metrics & Logs) 27.78 kB - -
@sentry/react 27.45 kB - -
@sentry/react (incl. Tracing) 44.52 kB - -
@sentry/vue 30.13 kB - -
@sentry/vue (incl. Tracing) 44.08 kB - -
@sentry/svelte 25.7 kB - -
CDN Bundle 28.39 kB - -
CDN Bundle (incl. Tracing) 43.2 kB - -
CDN Bundle (incl. Logs, Metrics) 29.76 kB - -
CDN Bundle (incl. Tracing, Logs, Metrics) 44.25 kB - -
CDN Bundle (incl. Replay, Logs, Metrics) 68.56 kB - -
CDN Bundle (incl. Tracing, Replay) 80.08 kB - -
CDN Bundle (incl. Tracing, Replay, Logs, Metrics) 81.16 kB - -
CDN Bundle (incl. Tracing, Replay, Feedback) 85.62 kB - -
CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics) 86.67 kB - -
CDN Bundle - uncompressed 82.93 kB - -
CDN Bundle (incl. Tracing) - uncompressed 128.07 kB - -
CDN Bundle (incl. Logs, Metrics) - uncompressed 87.07 kB - -
CDN Bundle (incl. Tracing, Logs, Metrics) - uncompressed 131.48 kB - -
CDN Bundle (incl. Replay, Logs, Metrics) - uncompressed 210.06 kB - -
CDN Bundle (incl. Tracing, Replay) - uncompressed 244.95 kB - -
CDN Bundle (incl. Tracing, Replay, Logs, Metrics) - uncompressed 248.34 kB - -
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed 257.86 kB - -
CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics) - uncompressed 261.25 kB - -
@sentry/nextjs (client) 46.93 kB - -
@sentry/sveltekit (client) 42.67 kB - -
@sentry/node-core 56.51 kB +0.02% +11 B 🔺
@sentry/node 173.6 kB +0.01% +12 B 🔺
@sentry/node - without tracing 96.54 kB +0.01% +5 B 🔺
@sentry/aws-serverless 113.54 kB +0.01% +9 B 🔺

View base workflow run

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 21, 2026

This pull request has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you apply the label PR: no-auto-close I will leave it alone ... forever!

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 28, 2026

Closing due to inactivity after stale warning. Comment or reopen when ready to continue, and use PR: no-auto-close to opt out of automatic closure.

@github-actions github-actions bot closed this Mar 28, 2026
@timfish timfish reopened this Mar 28, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 28, 2026 •
edited
Loading

Semver Impact of This PR

🟡 Minor (new features)

📋 Changelog Preview

This is how your changes will appear in the changelog.
Entries from this PR are highlighted with a left border (blockquote style).

New Features ✨

Browser

  • Add View Hierarchy integration by timfish in #14981
  • Replace element timing spans with metrics by logaretm in #19869

Deps

  • Bump babel-loader from 10.0.0 to 10.1.1 by dependabot in #19997
  • Bump handlebars from 4.7.7 to 4.7.9 by dependabot in #20008

Nuxt

  • Add middleware instrumentation compatibility for Nuxt 5 by s1gr1d in #19968
  • Support parametrized SSR routes in Nuxt 5 by s1gr1d in #19977

Other

  • (bun) Add bunRuntimeMetricsIntegration by chargome in #19979
  • (core) Support embedding APIs in google-genai by nicohrubec in #19797
  • (node) Add nodeRuntimeMetricsIntegration by chargome in #19923

Bug Fixes 🐛

  • (e2e) Pin @opentelemetry/api to 1.9.0 in ts3.8 test app by logaretm in #19992
  • (node) Ensure startNewTrace propagates traceId in OTel environments by logaretm in #19963
  • (nuxt) Use virtual module for Nuxt pages data (SSR route parametrization) by s1gr1d in #20020
  • (opentelemetry) Convert seconds timestamps in span.end() to milliseconds by logaretm in #19958

Documentation 📚

  • (release) Update publishing-a-release.md by nicohrubec in #19982

Internal Changes 🔧

Core

  • Introduce instrumented method registry for AI integrations by nicohrubec in #19981
  • Consolidate getOperationName into one shared utility by nicohrubec in #19971

Deps

  • Bump amqplib from 0.10.7 to 0.10.9 by dependabot in #20000
  • Bump actions/upload-artifact from 6 to 7 by dependabot in #19569
  • Bump srvx from 0.11.12 to 0.11.13 by dependabot in #20001
  • Bump @apollo/server from 5.4.0 to 5.5.0 by dependabot in #20007

Deps Dev

  • Remove esbuild override in astro-5-cf-workers E2E test by isaacs in #20024
  • Bump node-forge from 1.3.2 to 1.4.0 by dependabot in #20012
  • Bump yaml from 2.8.2 to 2.8.3 by dependabot in #19985

Other

  • (deno) Expand Deno E2E test coverage by chargome in #19957
  • (e2e) Add e2e tests for nodeRuntimeMetricsIntegration by chargome in #19989

🤖 This preview updates automatically when you update the PR.

@timfish timfish removed the PR: stale label Mar 28, 2026
@Lms24
Copy link
Copy Markdown
Member

Lms24 commented Mar 30, 2026

@timfish anything that we still need to change here to get this out of draft?

@timfish
Copy link
Copy Markdown
Collaborator Author

timfish commented Mar 30, 2026

I need to add an integration test and maybe some bike shedding on the export name.

I think "view hierarchy" isn't that descriptive of what it does and just describes our internal naming!

@Lms24
Copy link
Copy Markdown
Member

Lms24 commented Mar 30, 2026

I think "View Hierarchy" already has precedence since the mobile SDKs already ship it like this (e.g. React Native) and it's what the feature is called in the Sentry UI. Do you have other ideas? I could see going with something more DOM or component-related but from my PoV, View Hierarchy is also fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@timfish @AbhiPrasad @Lms24